// LESS columns
// --------------------------------------------------

@baseFontSize: 16px;
.clearfix() {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

// containers
.twocolumns,
.threecolumns,
.fourcolumns
{ 
	clear: both;

	// base column
	&>.column {
		float: left;
		min-height: @baseFontSize; 
		.inside { padding: 0 1em; }
	}
	&>.last { float: right; }
}

// breakouts
.twocolumns {
	&:after { .clearfix(); }
	&>.column { width: 50%; }
	&>.span-2 { width: 100%; }
}

.threecolumns {
	&:after { .clearfix(); }
	&>.column { width: 33%; }
	&>.span-2 { width: 66%; }
	&>.span-3 { width: 100%; }
}

.fourcolumns {
	&:after { .clearfix(); }
	&>.column { width: 25%; }
	&>.span-2 { width: 50%; }
	&>.span-3 { width: 75%; }
	&>.span-4 { width: 100%; }
}

